<template>
    <div>
        <TitleBar class="absolute top-0 left-[26px] right-[232px]">商城流水总数</TitleBar>
        <BigDigits class="absolute top-[64px] left-[26px] right-[31px]"
                   :value="(loader.data?.sumMoney.toFixed(2) ?? '0.00').padStart(12, '0')"></BigDigits>
        <div class="absolute top-[106px] right-[29px] text-[18px] text-white leading-[18px]">元</div>
        <img class="absolute top-[154px] left-[44px] right-[48px]" src="./assets/border.svg" alt="">
        <div class="absolute left-0 right-0 bottom-0 isolate bg-[#02050E]">
            <img class="mix-blend-lighten" src="./assets/image 52.png" alt="">
        </div>
        <div class="detail left-[74px] top-[160px]">
            <div>商户注册数(家)</div>
            <div>{{ loader.data?.merchantRegistNum ?? '-' }}</div>
        </div>
        <div class="detail left-[304px] top-[160px]">
            <div>商城成交量(次)</div>
            <div>{{ loader.data?.volume ?? '-' }}</div>
        </div>
        <div class="detail left-[541px] top-[160px]">
            <div>商品总数(件)</div>
            <div>{{ loader.data?.productCount ?? '-' }}</div>
        </div>
        <div class="detail left-[183px] top-[232px]">
            <div>商城总访问量(次)</div>
            <div>{{ loader.data?.pvCount ?? '-' }}</div>
        </div>
        <div class="detail left-[418px] top-[232px]">
            <div>分成收益(万元)</div>
            <div>{{ loader.data?.dividedMoney ?? '-' }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ComputedRef, inject, reactive } from 'vue'
import TitleBar from '../components/TitleBar.vue'
import BigDigits from '../components/BigDigits/index.vue'
import { Loader } from '../../shared/ApiTools';
import { useAutoLoader } from '../../shared/useAutoLoader';

const villageId = inject<ComputedRef<string>>('villageId')
const loader = reactive(new Loader<{
    "dividedMoney": number,
    "merchantRegistNum": number,
    "productCount": number,
    "pvCount": number,
    "sumMoney": number,
    "volume": number
}>('/mall/statistics/screenStatistical', 'POST', () => ({ villageId: villageId!.value })))

useAutoLoader(() => {
    if (!villageId?.value) return
    loader.load()
}, 20 * 1000)
</script>

<style scoped>
img {
    pointer-events: none;
}

.detail {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail div:first-child {
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: rgba(224, 247, 255, 0.8);
}

.detail div:last-child {
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: bolder;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #E0F7FF;
    text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
}
</style>